<template>
	<view class="content">
		<view class="img" v-for="(item,index) in imageList" :key="item.id">
			<h3>{{item.name}}</h3>
			<image :src="item.imageUrl" mode=""></image>
			<view class="btn">
				<button>{{jindu}}%</button>
				<button type="primary" @tap="genghuan(item.id,item.name,index)">更换</button>
			</view>
		</view>
	</view>
</template>

<script>
	// import {base64ToPath} from '../../js_sdk/gsq-image-tools/image-tools/index.js'
	// import {tupian} from '../../components/tupian/tupian.vue'
	import {pathToBase64} from '../../js_sdk/gsq-image-tools/image-tools/index.js'
	import {replaceImage} from '../../apis'
	import {
		getAllPicture
	} from '../../apis'
	export default {
		data() {
			return {
				imageList: [],
				jindu:0
			}
		},
		onLoad() {
			uni.showLoading({
				title:'加载中'
			})
			getAllPicture().then((res) => {
				let [err, data] = res
				// console.log(data)
				// console.log(data.data.data)
				this.imageList = data.data.data
				uni.hideLoading();
			})
		},
		methods: {
			genghuan(id,name,index){
				var that = this
				console.log("图片id"+id)
				console.log("图片索引"+name)
				//选择图片
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
				        console.log(JSON.stringify(res.tempFilePaths));
						const tempFilePaths = res.tempFilePaths
						 uni.compressImage({
						   src: tempFilePaths[0],
						   quality: 30,
						   success: res => {
						 	  pathToBase64(res.tempFilePath).then((base64) => {
									console.log(base64)
									const uploadTask = uni.uploadFile({
										url: 'https://exam.vip.qydev.com/uploads/images', //仅为示例，非真实的接口地址
										filePath: res.tempFilePath,
										name: 'file',
										formData: {
											'imageType':'AVATAR',
											'image': base64,
											// 'uid':id
										},
										success: (uploadFileRes) => {
											
											const pastUrl = JSON.parse(uploadFileRes.data).data.cloudUrl
											// this.imageList.push(pastUrl)
											console.log("上传成功")
											//图片上传成功，调用更换图片的接口
											console.log("ok"+id)
											replaceImage({
												"id":id,
												"imageUrl":pastUrl,
												"name":name
											}).then((res)=>{
												let [err,data] = res
												console.log("调用更换图片接口成功"+data)
												console.log("调用更换图片接口成功"+pastUrl)
												console.log("调用更换图片接口成功"+JSON.stringify(data) )
												if(data.data.code == 200){
													uni.showToast({
														title:'图片更换成功！',
														icon:'success'
													})
													that.jindu = 0
													console.log("index"+index)
													that.imageList[index].imageUrl = pastUrl
												}else{
													uni.showToast({
														title:'图片更换失败！',
														image:'../../static/gantan.png'
													})
												}
											})
										},
										fail: (uploadFileRes) => {
											console.log(uploadFileRes);
											console.log('上传失败')
											uni.showToast({
												title:'上传失败！',
												image:'../../static/gantan.png'
											})
										},
									})
									uploadTask.onProgressUpdate((res) => {
										that.jindu = res.progress
										console.log('上传进度' + res.progress);
										console.log('已经上传的数据长度' + res.totalBytesSent);
										console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
									});
						 	    })
						 	}
						})
				    }
				});
				// replaceImage({
				// 	"id":id,
				// 	"imageUrl":
				// 	"name":"首页轮播图"
				// })
			}
		},
	}
</script>

<style lang="scss" scoped>
	.img{
		width: 100%;
		height: 300px;
		margin-bottom: 75px;
		h3{
			text-align: center;
		}
		image{
			width: 100%;
			height: 100%;
		}
		.btn{
			display: flex;
			button{
				width: 20%;
				// background-color: green;
				margin: 0 auto;
				font-size: 14px;
				font-weight: 900;
			}
		}
	}
</style>
